<!--中间的表单设置-->
<template>
  <div>
    <!-- <a-button @click="validate">数据预览</a-button> -->
    <a-form
      ref="form"
      :model="setUpList"
      autoLabelWidth
      :layout="(layout as Tlayout)"
    >
      <!-- 添加v-show用作搭配配置是否显示 -->
      <a-row :gutter="16">
        <a-col
          v-for="(item, index) in setUpList"
          :key="index"
          :span="item.span"
          v-show="item.show"
        >
          <FormItem
            :componentType="item.componentType"
            v-model:props="item.props"
            :name="item.name"
            :required="item.required"
            :regex="regexList.includes(item.componentType) ? regex : undefined"
            v-model:values="item.values"
          />
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import FormItem from '../form-item/index.vue';

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;

  withDefaults(
    //参数说明
    defineProps<{
      setUpList: any[]; //tab显示的tab列表
      layout: string; //a-form的layout参数,
      //正则库
      regex: {
        [name: string]: {
          role: any;
          name: any;
        };
      };
    }>(),
    {}
  );

  const regexList = ['TEXT']; //可以传递正则库的控件类型列表，避免内存泄漏

  const form = ref();

  //表单校验函数
  const validate = async () => {
    const res = await form.value.validate();
    if (res) return Promise.resolve();
    return Promise.reject();
  };
</script>

<style lang="less" scoped></style>
